<template>
    <!--<div class="drawer-wrap">
        <div class="drawer-close">
            <i class="iconfont icon-xiajiantou "></i>
        </div>
        <el-drawer
                v-bind="$attrs"
                direction="btt"
                :modal="false"
                :with-header="false"
        >
--><el-collapse-transition>
    <div v-show="show" class="drawer-wrap">
        <div class="drawer-close" @click="handleClose">
            <i class="iconfont icon-xiajiantou "></i>
        </div>
        <div class="drawer-body">
            <el-scrollbar>
                <template v-for="item in groupList">
                    <template v-if="item.isDetail">
                        <div class="subfield-layout">
                            <div class="subfield-wrap">
                                <div class="subfield-title">{{item.title}}</div>
                                <div class="subfield-main">
                                    <div class="subfield-content">
                                        <m-submodule :id="item.id" ref="subRef" :dtl-data="item.dtlData" :cols="item.cols"></m-submodule>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </template>
            </el-scrollbar></div>
        </div>
</el-collapse-transition>
        <!--</el-drawer>-->
    <!--</div>-->
</template>

<script setup>
    import {ref,defineProps,defineEmits,watch} from 'vue'
    import MSubmodule from './Submodule'

    const props = defineProps(['groupList','show']),
      emit = defineEmits('update:show')

    function handleClose() {
      emit('update:show', false)
    }


</script>

<style scoped lang="less">
    .drawer-wrap{
        position: absolute;
        bottom: 0;
        background: #ffffff;
        z-index: 1000;
        box-shadow: 0 16px 48px 16px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .16);
        padding: 10px 20px;
        box-sizing: border-box;
        width: 100%;
        height: 40%;
        .drawer-close{
            background: #4a5a7a;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 13px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            top: -13px;
            color: #ffffff;
            & > i{
                font-size: 12px;
            }
        }
        .drawer-body{
            height: 100%;
        }
        ::v-deep{
            .el-drawer{
                .el-drawer__body{
                    padding-top: 8px;
                }
            }
        }
    }
.subfield-layout{
    .subfield-title{
        height: 30px;
        line-height:30px;
        padding-left: 18px;
        color: #333;

    }
}
</style>
